<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"/>
	<title>网格</title>
	<!-- 基础css  -->
	<link rel="stylesheet" href="css/public.css" />
	<link rel="stylesheet" href="layui/css/layui.css" />
	<link rel="stylesheet" href="css/warning.css" />
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=c93e1e293e5b1c3dc581f3ff633144d3&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Walking,AMap.Riding"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <link rel="stylesheet" href="css/mapstyle.css">
	<!-- 首页css  -->
</head>
<body>
	<div class="wTop">
		<div class="wPublic">
			<a class="wTLogo" href="#this"><img src="images/logo.png"></a>
			<div class="fr">
				<a class="wTName" href="#this">
					<img src="images/name.png">
					<em>六小喵</em>
				</a>
				<a class="wTHome" href="#this" title="首页"><img src="images/home.png"></a>
				<a class="wTHome" href="#this" title="消息"><img src="images/news.png"><font>66</font></a>
				<a class="wTHome" href="#this" title="换肤"><img src="images/peeler.png"></a>
				<a class="wTHome" href="#this" title="退出"><img src="images/out.png"></a>
			</div>
		</div>
	</div>
	
	<!--内容-->
		<div id="myPageTop">
		    <a href="javascript:void(0);" id="show">
		        点击试试———路线工具（展开/收缩）
		    </a>
		    <div class="pageShow">
		        <h3>搜索地址</h3>
		        <input id="tipinput" placeholder="模糊地址搜索">
		        <h3>搜索行车路径</h3>
		        <input id="star" placeholder="行车开始地址">
		        <span>—&nbsp;—</span>
		        <input id="end" placeholder="行车结束地址">
		        <span>—&nbsp;—</span>
		        <a id="car" href="javascript:void(0);">
		            点击搜索
		        </a>
		
		        <h3>搜索骑行路径</h3>
		        <input id="cStar" placeholder="骑行开始地址">
		        <span>—&nbsp;—</span>
		        <input id="cEnd" placeholder="骑行结束地址">
		        <span>—&nbsp;—</span>
		        <a id="riding" href="javascript:void(0);">
		            点击搜索
		        </a>
		
		        <h3>搜索步行路径</h3>
		        <input id="wStar" placeholder="步行开始地址">
		        <span>—&nbsp;—</span>
		        <input id="wEnd" placeholder="步行结束地址">
		        <span>—&nbsp;—</span>
		        <a id="walk" href="javascript:void(0);">
		            点击搜索
		        </a>
		        <div style="margin:20px 0;">
		            <a id="box" href="javascript:void(0);">
		                鼠标右键拖取选框放大地图
		            </a>
		            <a id="meter" href="javascript:void(0);">
		                测量距离
		            </a>
		        </div>
		    </div>
		</div>
		<div id="container"></div>
		<div id="panel"></div>

	<!--内容 end-->
	
	<!--底部-->
	<ul class="waGrid">
		<li id="region">
			<img src="images/waG4.png">
			<p>网格区域</p>
		</li>
		<li id="personnel">
			<img src="images/waG1.png">
			<p>网格人员</p>
		</li>
		<li id="report">
			<img src="images/waG3.png">
			<p>事件上报</p>
		</li>
		<li id="query">
			<img src="images/waG2.png">
			<p>事件查询</p>
		</li>
	</ul>
	<!--底部 end-->
	
	<script src="js/jquery-1.8.3.min.js"></script>
	<script src="js/main.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
    <script>
    	$(function(){
    		layui.use(['laypage', 'layer' , 'form'], function(){
			  var laypage = layui.laypage
			  ,layer = layui.layer
			  , $ = layui.jquery; //独立版的layer无需执行这一句
			  //总页数低于页码总数
			  laypage.render({
			    elem: 'demo0'
			    ,count: 150 //数据总数
			  });
			  
			  //表单
			  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
			  
			  //……
			  
			  //但是，如果你的HTML是动态生成的，自动渲染就会失效
			  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
			  form.render();
			  
			  //网格区域
			   $('#region').on('click', function(){
					 	layer.open({
					      type: 2,
					      title: '网格区域',
					      shadeClose: true,
					      shade: false,
					      offset : 'lt',
					      maxmin: true, //开启最大化最小化按钮
					      area: ['700px', '500px'],
					      content: 'region.html'
					    });
				});
				//网格人员
				$('#personnel').on('click', function(){
					 	layer.open({
					      type: 2,
					      title: '网格人员',
					      shadeClose: true,
					      shade: false,
					      offset : 'lt',
					      maxmin: true, //开启最大化最小化按钮
					      area: ['650px', '440px'],
					      content: 'personnel.html'
					    });
				});
				
				//事件上报
			   $('#report').on('click', function(){
					 	layer.open({
					      type: 2,
					      title: '事件上报',
					      shadeClose: true,
					      shade: false,
					      offset : 'lt',
					      maxmin: true, //开启最大化最小化按钮
					      area: ['600px', '95%'],
					      content: 'report.html'
					    });
				});
				
				//事件查询
			   $('#query').on('click', function(){
					 	layer.open({
					      type: 2,
					      title: '事件查询',
					      shadeClose: true,
					      shade: false,
					      offset : 'lt',
					      maxmin: true, //开启最大化最小化按钮
					      area: ['893px', '550px'],
					      content: 'query.html'
					    });
				});
    		});
		});
    </script>
</body>
</html>
